<!DOCTYPE html>
<html lang="en" xmlns: xmlns: xmlns: xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/vue/vue.js"></script>
</head>
<body>
<div id="app" align="center">
    <input type="text" name="url" id="url">
    <input type="button" value="爬" v-on:click="findPoetry()">
    <h1 id="zs_title" v-html="title"></h1>
    <div class="niandai_zuozhe" v-html="author"></div>
    <div class="xu" id="zs_xu" v-html="xu"></div>
    <div class="item_content" id="zs_content" v-html="content"></div>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            title: '',
            author: '',
            xu: '',
            content: ''
        },
        methods: {
            findPoetry:function () {
                var _this = this;
                var url = $('#url').val();
                if (url.indexOf('www.shicimingju.com') == -1){
                    alert('请填入正确格式的url');
                }
                $.get('/poetry', {url:url}, function (data) {
                    _this.title = data.title;
                    _this.author = data.author;
                    _this.xu = data.xu;
                    _this.content = data.content;
                })
            }
        },
        mounted: function () {
        }
    });
</script>
</body>
</html>